<template>
    <div class="box">
      <header class="header">
        <van-nav-bar title="商品详情" left-arrow @click-left="$router.back()" @click-right="showShare=true">
          <template #right>
            <van-icon name="ellipsis" size="18" />
          </template>
        </van-nav-bar>
      </header>
      <div class="content">
        <van-swipe class="my-swipe" @change="onChange">
          <van-swipe-item v-for="(item, index) of bannerlist" :key="index" @click="previewImg">
            <van-image :src="item" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              {{ current + 1 }} / {{ bannerlist.length }}
            </div>
          </template>
        </van-swipe>
        <div class="buy_area">
          <div class="price_wrap"><em>￥</em>{{ price }} </div>
          <p>销量 <i>{{ sales }}</i> 库存 <i>{{ stock }}</i></p>
          <div class="proname">
            <h3>
              <van-tag type="danger">{{ brand }}</van-tag>
              {{ proname }}
            </h3>
          </div>
        </div>
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" @click="chat"/>
          <router-link to="/cart">
            <van-goods-action-icon icon="cart-o" text="购物车" @click="loginState ? $router.push('/cart') : $router.push('/login')" :badge="totalNum"/>
          </router-link>
          <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
          <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
      </div>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"/>
    </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon, ShareSheet, Image as VanImage, Swipe, SwipeItem, ImagePreview, Tag, GoodsAction, GoodsActionIcon, GoodsActionButton, Toast } from 'vant'
import { getProDetail, addCart } from '@/api'
import { mapActions, mapState, mapGetters } from 'vuex'
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(ShareSheet)
Vue.use(VanImage)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(ImagePreview)
Vue.use(Tag)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
export default {
  // props: ['proid'], //路由组件传参的属性
  data () {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      bannerlist: [ // 预先备好轮播图数据
        'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/50631/35/2890/212150/5d0b5b14E5d8b4b7a/3e1e57b00e6236d1.jpg!q80.dpg.webp',
        'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/55884/11/7169/155178/5d4b8726Ea1c39717/74629a27825a5c57.jpg!q80.dpg.webp'
      ],
      current: 0,
      proid: '',
      proname: '',
      price: '',
      brand: '',
      stock: 0,
      sales: 0
    }
  },
  computed: {
    ...mapState({
      loginState: ({ user: { loginState } }) => loginState,
      userid: ({ user: { userid } }) => userid,
      token: ({ user: { token } }) => token
    }),
    ...mapGetters({
      totalNum: 'totalNum'
    })
    // totalNum () {
    //   return this.$store.getters.totalNum
    // }
  },
  methods: {
    ...mapActions({
      getCartList: 'cart/getCartList'
    }),
    previewImg () {
      ImagePreview({
        images: this.bannerlist,
        startPosition: this.current,
        closeable: true
      })
    },
    onChange (index) {
      this.current = index
    },
    addCart () {
      // 本地验证状态
      if (this.loginState) {
      // 前端验证登录状态
        addCart({
          userid: this.userid,
          proid: this.proid,
          num: 1
        }).then(res => {
          if (res.data.code === '200') {
            Toast('加入购物车成功')
            this.getCartList(this.userid)
          }
        })
      } else {
        this.$router.push('/login')
      }
    },
    chat () {
      window._MEIQIA('showPanel')
      window._MEIQIA('metadata', {
        name: '智子', // 美洽默认字段
        tel: '18813007814',
        address: '半人马座阿尔法星', // 美洽默认字段
        aaa: 'bla bla bla', // 自定义字段
        xyz: 'lalala' // 自定义字段
      })
      window._MEIQIA('product', {
        picUrl: 'https://xxx/xxx.jpg',
        title: '美洽 - 客服系统',
        description: '支持PC端/移动端/微信/APP/微博...等全渠道对话接入，稳定快速，无需下载部署，注册即用',
        productUrl: 'http://www.mobiletrain.org/?pinzhuanbdtg=biaoti',
        salesCount: 111,
        success: data => {
          console.log(data, 'data')
        },
        error: error => {
          console.log(error, 'error')
        }
      })
    }
  },
  mounted () {
    window._MEIQIA('withoutBtn')
    window._MEIQIA('init')
    // const proid = this.$route.params.proid
    // const { params: { proid } } = this.$route
    const { proid } = this.$route.params
    getProDetail({ proid }).then(res => {
      const proimg = res.data.data[0].proimg
      this.proid = proid
      this.proname = res.data.data[0].proname
      this.price = res.data.data[0].price
      this.brand = res.data.data[0].brand
      this.stock = res.data.data[0].stock
      this.sales = res.data.data[0].sales
      this.bannerlist.unshift(proimg)
    })
    if (this.loginState && this.token) {
      this.getCartList(this.userid)
    }
  }
}
</script>

<style lang="scss" scoped>
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.1);
  }
  .buy_area{
    padding:10px 15px;
    line-height: 20px;
    .price_wrap {
      font-size: 20px;
      color: #f2270c;
      em{
        font-size: 12px;
      }
    }
    p{
      font-size:12px;
      i{
        color: #f2270c;
      }
    }
  }
  .van-swipe {
    width: 3.75rem;
    height: 3.75rem;
    .van-image {
      width: 100%;
    }
  }
</style>
